<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13.2.DOM-根据标签名获得getElementsTagName()</title>
</head>

<body>
    <ul>
        <li>根据标签名获得getElementsTagName('1')</li>
        <li>根据标签名获得getElementsTagName('2')</li>
        <li>根据标签名获得getElementsTagName('3')</li>
        <li>根据标签名获得getElementsTagName('4')</li>
        <li>根据标签名获得getElementsTagName('5')</li>
    </ul>
    <ol id="ol">
        <li>根据标签名获得getElementsTagName('6')</li>
        <li>根据标签名获得getElementsTagName('7')</li>
        <li>根据标签名获得getElementsTagName('8')</li>
        <li>根据标签名获得getElementsTagName('9')</li>
        <li>根据标签名获得getElementsTagName('10')</li>
    </ol>
    <script>
        var lists = document.getElementsByTagName('li');
        console.log(lists);
        console.log('----------------------------------');
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        console.log(lists[0]);
        console.log('----------------------------------');
        // 2.依次打印里面的元素对象 可以采用遍历的方式
        for (var i = 0; i < lists.length; i++) {
            console.log(lists[i]);
        }
        // 3.得到的元素对象是动态的
        // 4.如果页面中只有一个子元素标签 返回的环视伪数组的形式
        // 5.如果页面中没有这个元素 返回的是个空的伪数组 []
        console.log('----------------------------------');

        // 6.element.getElementsByTagName('标签名') // 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // ol
        // console.log(ol[0].getElementsByTagName('li'));

        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

</html>